$(function() {
	var table = $('#project')
			.DataTable(
					{
						"processing" : true,
						"serverSide" : true,
						"dom" : 'tr<"bottom"ip>',
						"ajax" : {
							"url" : window.basePath + "project/list",
							"type" : "POST",
						},
						"columns" : [
								{
									"data" : "name"
								},
								{
									"data" : "description"
								},
								{
									"data" : "type"
								},
								{
									"data" : "province"
								},
								{
									"data" : "city"
								},
								{
									"data" : "district"
								},
								{
									"class" : "details-control",
									"orderable" : false,
									"data" : null,
									"searchable" : false,
									"defaultContent" : "<button type='button' class='btn btn-success btn-sm'>edit</button>&nbsp;<button type='button' class='btn btn-danger btn-sm'>delete</button>"
								} ]

					});
	$("#searchName").on('keyup', function() {
		table.column(0).search(this.value).draw();
	});

	$("#searchDescription").on('keyup', function() {
		table.column(1).search(this.value).draw();
	});

	$("#searchType").on('keyup', function() {
		table.column(2).search(this.value).draw();
	});
	$("#searchProvince").on('keyup', function() {
		table.column(3).search(this.value).draw();
	});

	$("#searchCity").on('keyup', function() {
		table.column(4).search(this.value).draw();
	});

	$("#searchDistrict").on('keyup', function() {
		table.column(5).search(this.value).draw();
	});

	$("#province").change(function() {
		$("#city").prop('disabled', false);
		city($("#province").val(), "city", "district");
		$("#district").prop('disabled', true);
		$("#district").selectpicker('refresh');
	});

	$("#city").change(function() {
		$("#district").prop('disabled', false);
		district($("#city").val(), "district");
	});
	function province(provinceDom, cityDom, districtDom) {
		$("#" + provinceDom).html("<option>Please Select</option>");
		$.ajax({
			url : window.basePath + "location/select/province",
			success : function(data) {
				$.each(data, function(i, province) {
					$("#" + provinceDom).append(
							"<option value='" + province.id + "'>"
									+ province.name + "</option>");
				});
				$("#" + provinceDom).selectpicker('refresh');
			}
		});
	}

	function city(province, cityDom, districtDom) {
		$("#" + cityDom).html("<option>Please Select</option>");
		$.ajax({
			url : window.basePath + "location/select/city",
			data : {
				province : province
			},
			type : "POST",
			success : function(data) {
				$.each(data, function(i, province) {
					$("#" + cityDom).append(
							"<option value='" + province.id + "'>"
									+ province.name + "</option>");
				});
				$("#" + cityDom).selectpicker('refresh');
			}
		});
	}

	function district(city, districtDom) {
		$("#" + districtDom).html("<option>Please Select</option>");
		$.ajax({
			url : window.basePath + "location/select/district",
			data : {
				city : city
			},
			type : "POST",
			success : function(data) {
				$.each(data, function(i, province) {
					$("#" + districtDom).append(
							"<option value='" + province.id + "'>"
									+ province.name + "</option>");
				});
				$("#" + districtDom).selectpicker('refresh');
			}
		});
	}

	$("#project tbody").on("click", "button", function() {
		var data = table.row($(this).parents('tr')).data();
		if ($(this).hasClass('btn-success')) {

			$("#nameEdit").val(data.name);
			$("#descriptionEdit").val(data.description);
			$("#typeEdit").val(data.type);
			$("#provinceEdit").selectpicker();
			province("provinceEdit", "cityEdit", "districtEdit");
			provinceEdit(data.province);
			$("#cityEdit").selectpicker();
			$('#cityEdit').text(data.city);
			$('#cityEdit').selectpicker('refresh');
			$("#districtEdit").selectpicker();
			$('#districtEdit').text(data.district);
			$('#districtEdit').selectpicker('refresh');
			$("#idEdit").val(data.id);
			$('#editProjectModal').modal('show');

		} else if ($(this).hasClass('btn-danger')) {
			$("#idDelete").val(data.id);
			$('#deleteProjectModal').modal('show');
		}

	});

	function provinceEdit(text) {
		var count = $("#provinceEdit").get(0).options.length;
		for ( var i = 0; i < count; i++) {
			if ($("#provinceEdit").get(0).options[i].text == text) {
				$("#provinceEdit").selectpicker('val',$("#provinceEdit").get(0).options[i].value);
				break;
			}
		}
	}
	$("#addProject").click(function() {
		$("#createProjectModal").modal('show');
		$("#province").selectpicker();
		$("#city").selectpicker();
		$("#district").selectpicker();
		province("province", "city", "district");
	});
});